<template>
  <span class="user-hover-trigger">
    <span
      :class="['font-bold', 'text-sm', 'text-blue-900']"
      @mouseenter="show = true"
      @mouseleave="show = false"
    >
      {{ user.name }}
    </span>
    <!-- <transition name="fade">
      <div v-if="show" class="user-hover-card" @mouseenter="show = true" @mouseleave="show = false">
        <div class="flex gap-3 items-center mb-2">
          <img :src="user.avatar" class="w-12 h-12 rounded-full object-cover border shadow" />
          <div>
            <div class="font-bold text-base text-slate-800">{{ user.name }}</div>
            <div class="text-xs text-slate-400">{{ user.desc }}</div>
          </div>
        </div>
        <div class="flex gap-6 mb-2">
          <div class="text-center"><div class="font-bold text-lg">{{ user.answer }}</div><div class="text-xs text-slate-400">回答</div></div>
          <div class="text-center"><div class="font-bold text-lg">{{ user.article }}</div><div class="text-xs text-slate-400">文章</div></div>
          <div class="text-center"><div class="font-bold text-lg">{{ user.follower }}</div><div class="text-xs text-slate-400">关注者</div></div>
        </div>
        <div class="flex gap-2">
          <el-button type="primary" size="small">+ 关注他</el-button>
          <el-button size="small" disabled>发私信</el-button>
        </div>
      </div>
    </transition> -->
  </span>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const props = defineProps({
  user: Object,
  small: Boolean
})
const show = ref(false)
const router = useRouter()
function goUserHome() {
  const uid = props.user?.uid ?? props.user?.id
  console.log(uid)
  const uid1 = 1000
  if (uid1) {
    router.push(`/user/${uid}`)
  }
}
</script>
<style scoped>
.user-hover-trigger { position: relative; display: inline-block; }
.user-hover-card {
  position: absolute;
  top: 1.8em;
  left: 0;
  z-index: 9999;
  min-width: 220px;
  background: #fff;
  border-radius: 1.2rem;
  box-shadow: 0 4px 24px 0 rgba(56,112,255,0.13);
  border: 1px solid #e5eaf3;
  padding: 18px 20px 14px 20px;
  font-size: 14px;
  color: #1e293b;
  transition: box-shadow 0.18s;
  pointer-events: auto;
}
.fade-enter-active, .fade-leave-active { transition: opacity 0.18s; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
.fade-enter-to, .fade-leave-from { opacity: 1; }
</style> 